<template>
  <div class="classify flex">
    <div class="c-l">
      <p class="tit">IPC分类查询</p>
      <el-input
        v-model="searchInfo.name"
        placeholder="请输入分类号或关键词"
        clearable
      ></el-input>
      <el-button class="btn" type="primary" @click="search">检索</el-button>
    </div>
    <div class="c-r flex-auto" v-loading="loading">
      <div v-show="isExpandAll">
        <el-table
          :data="tableData"
          style="width: 100%"
          max-height="800px"
          :show-header="false"
          row-key="id"
          border
          default-expand-all
        >
          <el-table-column prop="code" label="" width="280"> </el-table-column>
          <el-table-column prop="name" label=""> </el-table-column>
        </el-table>
      </div>
      <div v-show="!isExpandAll">
        <el-table
          :data="tableData"
          style="width: 100%"
          max-height="800px"
          :show-header="false"
          row-key="id"
          border
          :tree-props="treeProps"
          :load="loadMore"
          lazy
        >
          <el-table-column prop="code" label="" width="280"> </el-table-column>
          <el-table-column prop="name" label=""> </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      loading: false,
      isExpandAll: false,
      searchInfo: {
        name: "",
        pid: "",
      },
      treeProps: {
        children: "children",
        hasChildren: "hasNext",
      },
      tableData: [],
    };
  },
  created() {
    this.search();
  },
  methods: {
    search() {
      if (this.searchInfo.name != "") {
        this.searchInfo.pid = "";
        this.isExpandAll = true;
      } else {
        this.searchInfo.pid = "0";
        this.isExpandAll = false;
      }
      // console.log("this.isExpandAll", this.isExpandAll);
      this.loading = true;
      this.$get(this.$Url.patent.ipcList, this.searchInfo).then((res) => {
        const data = res.data;
        this.tableData = data;
        this.loading = false;
      });
    },
    loadMore(tree, treeNode, resolve) {
      // console.log(tree, treeNode);
      const param = {
        pid: tree.id,
      };
      this.$get(this.$Url.patent.ipcList, param).then((res) => {
        const data = res.data;
        resolve(data);
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.classify {
  padding: 20px;
  .c-l {
    width: 200px;
    .tit {
      font-size: 22px;
      margin-bottom: 20px;
    }
    .btn {
      width: 200px;
      margin-top: 20px;
      background-color: $mainColor;
      border-color: $mainColor;
    }
  }
  .el-input--medium {
    height: auto;
  }
  .c-r {
    padding-left: 20px;
    ::v-deep(.el-table__placeholder) {
      width: 8px;
      height: 8px;
      background-color: #999;
      border-radius: 50%;
      margin-right: 4px;
    }
    ::v-deep(.el-table__expand-icon) {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    ::v-deep(.el-table__expand-icon .el-icon-arrow-right:before) {
      content: "\e6d9";
      border: 1px solid $mainColor;
      padding: 1px;
      color: $mainColor;
    }
    ::v-deep(.el-table__expand-icon--expanded .el-icon-arrow-right:before) {
      content: "\e6d8";
    }
  }
}
</style>
